<template>
  <el-drawer :visible.sync="visible" :with-header="false" :modal="false" style="position: absolute" :wrapperClosable="false" :destroy-on-close="true">
    <div class="PlayList">
      <div class="list">播放列表({{ playList.length }})</div>
      <Table :tableData="playList" :config="config"></Table>
    </div>
  </el-drawer>
</template>

<script>
import Table from '@/components/table/Table';
export default {
  props: ['visible'],
  data() {
    return {
      config: {
        width: 130,
        showTodos: false,
        showAlbum: false,
      },
    };
  },
  computed: {
    playList() {
      return this.$store.state.list.playList;
    },
  },
  components: {
    Table,
  },
  methods: {},
};
</script>

<style scoped='scoped'>
.list {
  color: #919191;
  font-size: 13px;
  text-align: center;
  margin: 5px 0;
}
</style>